<template>
  <div class="signIn">
    <div class="back"><span class="el-icon-arrow-left" @click="back"></span><span @click="back">返回</span></div>
    <img src="../assets/images/log.png" />
    <div class="input-Form">
      <!-- rules：表单验证规则 -->
      <el-form :rules="rules" :model="form">
        <!-- prop：表单域 model 字段 用于使用验证规则-->
        <el-form-item label="账号:" prop="username">
          <!-- v-model：绑定的表单数据对象属性  ref分组-->
          <el-input v-model="form.username" name="username" ref="username"></el-input>
        </el-form-item>
        <!-- label为显示文本 -->
        <el-form-item label="邮箱:" prop="email">
          <el-input type="email" v-model="form.email" name="email" ref="email"></el-input>
        </el-form-item>
        <el-form-item class="check-item" prop="checked">
          <el-input v-model="form.checked" ref="code"></el-input>
          <el-button type="button" @click="check()" ref="checkCode" class="a">发送验证码</el-button>
        </el-form-item>
        <el-form-item label="新密码:" prop="password">
          <el-input type="password" v-model="form.password" name="password" ref="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="submit" class="zhuce" ref="zhuce" @click="xiugai">修改密码</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      error: 0,
      form: {
        username: "",
        email: "",
        checked: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { pattern: /^\w{5,12}$/, message: "5~12位" },
        ],

        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,
            message: "邮箱不符合规则",
          },
        ],
        checked: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^\w{6,16}$/, message: "6~16位" },
        ],
      },
    };
  },
  methods: {
    back(){
      history.go(-1)
    },
    check() {
      //取值
      let time = 120;
      let $button = $(this.$refs.checkCode.$el);
      let $code = $(this.$refs.checkCode.$el.children);
      let $username = $(this.$refs.username.$el.children);
      let $email = $(this.$refs.email.$el.children);
      let email = $email.val();
      let username=$username.val();
      // 邮箱格式验证
      let reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
      if (reg.test(email)) {
        //发邮件
        axios
          .post("/setpass", "email=" + email+"&user="+username)
          .then((res) => {
            if(res.data.code){
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            }else{
              this.$message({
              message: res.data.msg,
              type: "error",
            });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "邮箱不规范",
          type: "error",
        });
      }

      //等待按钮
      let mytime = setInterval(function () {
        sub();
      }, 1000);
      function sub() {
        time--;
        $code.get(0).innerHTML = "请等待" + time + "秒";
        $button.attr("disabled", true);
        if (time === 0) {
          clearInterval(mytime);
          $code.get(0).innerHTML = "发送验证码";
          $button.attr("disabled", false); //按键可用
        }
      }
    },
    xiugai() {
      //取值
      var $username = $(this.$refs.username.$el.children);
      var $email = $(this.$refs.email.$el.children);
      var $possword = $(this.$refs.password.$el.children);
      var $code = $(this.$refs.code.$el.children);
      //去空格
      var username = $username.val();
      var email = $email.val();
      var password = $possword.val();
      var code = $code.val();
      if(code<1000 || code>9999){
         this.$message({
          message: "验证码格式错误",
          type: "error",
        });
        return;
      }
      // 验证
      if (username.length < 5 || username.length > 12) {
        this.$message({
          message: "用户名不规范",
          type: "error",
        });
        return;
      }
      if (password.length < 6 || password.length > 16) {
        this.$message({
          message: "密码不规范",
          type: "error",
        });
        return;
      }
      let reg1 = /^\w{6,16}$/;
      let reg2 = /^\w{5,12}$/;
      if (!reg2.test(username)) {
        this.$message({
          message: "用户名中含有非法字符",
          type: "error",
        });
        return;
      }
      if (!reg1.test(password)) {
        this.$message({
          message: "密码中含有非法字符",
          type: "error",
        });
        return;
      }
      //注册
      axios
        .post(
          "/setPassword",
          "username=" +
            username +
            "&email=" +
            email +
            "&password=" +
            password +
            "&code=" +
            code
        )
        .then((val) => {
          if (val.data.code != 0) {
            this.$message({
              message: val.data.msg,
              type: "error",
              duration:1000
            });
          } else {
            this.$message({
              message: val.data.msg,
              type: "success",
              duration:1000
            });
            history.go(-1);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>


<style scoped>
/* 返回键 */
.back{
  line-height: 50px;
  color: #fff;
  width: 100%;
  background-color: deeppink;
  opacity: .7;
  font-size: 20px;
  display: flex;
}
.back span:first-child{
  font-size: 50px;
}
/* log图片 */
.signIn img {
  margin-bottom:20px;
  width: 80%;
}
.signIn >>> .el-form-item {
  margin: 0;
  height: 60px;
}
.signIn >>> .el-form-item .el-form-item__label {
  float: left;
  width: 25%;
  font-size: 18px;
  text-align: right;
  padding-top: 5px;
}
.signIn >>> .el-form-item .el-form-item__content {
  float: right;
  width: 70%;
  height: 30px;
  margin-right: 5%;
}
.signIn >>> .el-form-item .el-form-item__content .el-form-item__error {
  top: 40px;
  left: 20px;
}

.signIn >>> .el-form-item .el-form-item__content .el-input__inner {
  border-top: transparent;
  border-left: transparent;
  border-radius: 0;
  height: 30px;
  width: 90%;
  border-right: transparent;
  font-size: 18px;
  padding-top: 0;
}
.check-item >>> .el-form-item__content {
  display: flex;
}
.check-item >>> .el-form-item__content .el-input {
  width: 50%;
  margin: 0 8px;
}
.check-item >>> .el-form-item__content .el-button {
  height: 40px;
  width: 40%;
  color: #fc347b;
  background: #fff1f6;
  border-radius: 30px;
  padding-left: 15px;
}
.check-item >>> .el-form-item__content .el-button span {
  padding-bottom: 5px;
}
.signIn .zhuce {
  width: 80%;
  margin-right: 20%;
  background-image: linear-gradient(90deg, #ff4aae, #ff1268);
  color: white;
  font-size: 18px;
  border: none;
}
</style>
